<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title th:text="${title}">处理订单 - 点餐系统</title>
    <link rel="stylesheet" th:href="@{/css/element-ui.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div id="app">
    <!-- 顶部导航 -->
    <div class="header">
        <div class="header-title" th:text="${title}">处理订单</div>
    </div>

    <!-- 订单信息 -->
    <div class="process-container" v-if="order">
        <div class="order-detail">
            <div class="detail-section">
                <div class="section-title">📋 订单信息</div>
                <div class="detail-item">
                    <span class="label">订单ID：</span>
                    <span class="value">{{ order.id }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">客户姓名：</span>
                    <span class="value">{{ order.customerName }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">下单时间：</span>
                    <span class="value">{{ formatTime(order.createTime) }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">客户备注：</span>
                    <span class="value">{{ order.note || '无' }}</span>
                </div>
            </div>

            <div class="detail-section">
                <div class="section-title">🛒 订单内容</div>
                <div class="order-items">
                    <div
                            v-for="(item, index) in order.orderDetails"
                            :key="index"
                            class="order-detail-item">
                        <span class="item-name">{{ item.productName }}</span>
                        <span class="item-quantity">×{{ item.quantity }}</span>
                    </div>
                </div>
            </div>

            <!-- 处理操作 -->
            <div class="process-section">
                <div class="section-title">⚡ 处理订单</div>
                <div class="process-actions">
                    <button
                            class="process-btn complete-btn"
                            @click="processOrder(1)">
                        ✅ 完成订单
                    </button>
                    <button
                            class="process-btn reject-btn"
                            @click="processOrder(2)">
                        ❌ 驳回订单
                    </button>
                </div>

                <div class="process-note">
                        <textarea
                                class="form-textarea"
                                placeholder="处理备注（可选）"
                                v-model="processNote"
                                maxlength="200"
                                rows="3"></textarea>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载状态 -->
    <div v-else-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <div>加载订单信息...</div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-state">
        <div class="error-icon">❌</div>
        <div class="error-text">订单不存在或加载失败</div>
        <button class="retry-btn" @click="loadOrder">重试</button>
    </div>
</div>

<script th:src="@{/lib/vue.js}"></script>
<script th:src="@{/lib/element-ui.js}"></script>
<script th:src="@{/lib/axios.js}"></script>
<script th:src="@{/lib/api.js}"></script>
<script th:src="@{/js/front/process.js}"></script>
</body>
</html>